<template>
    
  <div class="meeting-container">
    <div class="search-container">
      <el-input v-model="searchQuery" placeholder="请输入会议室名称" style="width: 300px" />
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </div>
    <el-table :data="meetingRooms" border style="width: 80%">
      <el-table-column prop="roomId" label="会议室ID" width="200" />
      <el-table-column prop="name" label="会议室名称" width="250"/>
      <el-table-column prop="type" label="类型" width="200">
        <template #default="scope">
          {{ getTypeText(scope.row.type) }}
        </template>
      </el-table-column>
      <el-table-column prop="capacity" label="容量" width="150" />
      <el-table-column prop="pricePerHour" label="价格(元/小时)" width="150" />
      <el-table-column prop="status" label="状态" width="150">
        <template #default="scope">
          <el-tag :type="getStatusTagType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button v-if="scope.row.status === 2" type="primary" size="small" @click="handleUpdateStatus(scope.row.roomId, 3)">使用</el-button>
          <el-button v-else-if="[3,4].includes(scope.row.status)" type="success" size="small" @click="handleUpdateStatus(scope.row.roomId, 0)">正常</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage, ElTag } from 'element-plus';
import querystring from "querystring";
const meetingRooms = ref([]);
const searchQuery = ref('');

const getTypeText = (type) => {
  const typeMap = {
    0: '教室型',
    1: '圆桌型'
  };
  return typeMap[type] || '未知类型';
};

const getStatusText = (status) => {
  const statusMap = {
    0: '空闲',
    1: '锁定',
    2: '预定',
    3: '使用',
    4: '维护'
  };
  return statusMap[status] || '未知状态';
};

const getStatusTagType = (status) => {
  const tagTypeMap = {
    0: 'success',
    1: 'warning',
    2: 'info',
    3: '',
    4: 'danger'
  };
  return tagTypeMap[status] || '';
};

const fetchMeetingRooms = async () => {
  try {
    const response = await axios.get('/api/staff/meetingRoom');
    meetingRooms.value = response.data.data;
  } catch (error) {
    console.error('获取会议室列表失败:', error);
    ElMessage.error('获取会议室列表失败');
  }
};

const handleUpdateStatus = async (roomId, status) => {
  try {
    await axios.post('/api/staff/meetingRoom/update', { roomId, status });
    ElMessage.success('状态更新成功');
    fetchMeetingRooms();
  } catch (error) {
    console.error('状态更新失败:', error);
    ElMessage.error('状态更新失败');
  }
};

const handleSearch = async () => {
  try {
    const response = await axios.get('/api/staff/meetingRoom/search', {
      params: { FuzzyName: searchQuery.value }
    });
    meetingRooms.value = response.data.data;
  } catch (error) {
    console.error('搜索会议室失败:', error);
    ElMessage.error('搜索会议室失败');
  }
};

onMounted(() => {
  fetchMeetingRooms();
});
</script>
<style scoped>
.meeting-container {
  padding: 20px;
}

.search-container {
  margin-bottom: 20px;
}
</style>